import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

///
/// 搜索输入框(含圆角/阴影/按钮)
///
class QSearchTextField extends StatefulWidget {
  final TextEditingController searchController;
  final double? boxHeight;
  final double? radius;
  final List<BoxShadow>? boxShadow;
  final TextInputType type;
  final String holdText;
  final bool enableInteractiveSelection;
  final List<TextInputFormatter>? inputFormatters;
  final Widget? leftWidget;
  final Widget? rightWidget;
  final String imgPath;
  final Function? searchAction;
  final bool showClear; // 是否显示清除按钮

  const QSearchTextField({
    Key? key,
    required this.searchController,
    this.boxHeight,
    this.radius,
    this.boxShadow,
    this.type = TextInputType.none,
    this.holdText = "搜索",
    this.inputFormatters,
    this.enableInteractiveSelection = false,
    this.imgPath = "",
    this.showClear = true,
    this.leftWidget,
    this.rightWidget,
    this.searchAction,
  }) : super(key: key);

  @override
  _QSearchTextFieldState createState() => _QSearchTextFieldState();
}

class _QSearchTextFieldState extends State<QSearchTextField> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(widget.radius ?? 18),
        color: Colors.white,
        boxShadow: widget.boxShadow ??
            const [
              BoxShadow(
                color: Color(0x20000000),

                /// 底色,阴影颜色
                offset: Offset(0, 2),

                /// 阴影位置,从什么位置开始
                blurRadius: 1,

                /// 阴影模糊层度
                spreadRadius: 0,

                /// 阴影模糊大小
              ),
            ],
      ),
      child: Row(
        children: [
          Expanded(
            child: Container(
              padding: const EdgeInsets.symmetric(
                horizontal: 11,
              ),
              height: widget.boxHeight ?? 32,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16),
                color: Colors.white,
              ),
              child: Row(
                children: [
                  widget.imgPath.isEmpty
                      ? const Icon(Icons.search, size: 26)
                      : Image.asset(
                          widget.imgPath,
                          width: 15,
                          height: 15,
                        ),
                  Expanded(
                    child: Container(
                      margin: const EdgeInsets.only(left: 7),
                      child: TextField(
                        controller: widget.searchController,
                        inputFormatters: widget.inputFormatters,
                        keyboardType: widget.type,
                        enableInteractiveSelection:
                            widget.enableInteractiveSelection,
                        style:
                            const TextStyle(fontSize: 15, color: Colors.black),
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: widget.holdText,
                          hintStyle: const TextStyle(
                            fontSize: 15,
                            color: Color(0xFF999999),
                          ),
                          isDense: true,
                          isCollapsed: true, // 高度包裹
                        ),
                        onChanged: (value) {
                          if (widget.searchAction != null) {
                            widget.searchAction!(value);
                          }
                          setState(() {});
                        },
                        onSubmitted: (value) {
                          if (widget.searchAction != null) {
                            widget.searchAction!(value);
                          }
                        },
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
          widget.showClear
              ? Offstage(
                  offstage: widget.searchController.text != '' ? false : true,
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        widget.searchController.text = '';
                      });
                      if (widget.searchAction != null) {
                        widget.searchAction!("");
                      }
                    },
                    child: Container(
                      height: 13,
                      width: 13,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: const Color.fromRGBO(161, 165, 169, 1),
                      ),
                      child: const Icon(
                        Icons.close_rounded,
                        size: 10,
                        color: Colors.white,
                      ),
                    ),
                  ),
                )
              : Container(),
          widget.rightWidget ??
              GestureDetector(
                onTap: () {
                  if (widget.searchAction != null) {
                    widget.searchAction!(widget.searchController.text);
                  }
                },
                child: Container(
                  margin: const EdgeInsets.symmetric(horizontal: 15),
                  child: Row(
                    children: [
                      Container(
                        width: 1,
                        height: 15,
                        color: const Color(0xFFD8D8D8),
                      ),
                      const SizedBox(width: 7),
                      const Text(
                        '搜索',
                        style: TextStyle(
                          fontSize: 15,
                          color: Color(0xFF177FF3),
                        ),
                      )
                    ],
                  ),
                ),
              ),
        ],
      ),
    );
  }
}
